<#import "/resource/common_html_front.ftl" as html>
<#import "/indexMenu.ftl" as menu>
<@html.htmlBase>
<style type="text/css">
.topCss {
	height: 28px;
	line-height: 28px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #E6E6E6;
	padding-left: 9px;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	margin-top: 0px;
}
.left_product{
	font-size: 12px;display: inline-block;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;max-width: 150px;
}
img.err-product {
background: url(${systemSetting().defaultProductImg}) no-repeat 50% 50%;
}
/* 星星点灯照亮我的家门 */
.star_bg {
    width: 120px; height: 22px;
    background: url("${basepath}/resource/images/star.png") repeat-x;
    position: relative;
    overflow: hidden;
}
.star {
    height: 100%; width: 24px;
    line-height: 6em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url("${basepath}/resource/images/star.png") repeat-x 0 -20px!important;
    left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.star_1:hover { width: 24px; }
.star_2:hover { width: 48px; }
.star_3:hover { width: 72px; }
.star_4:hover { width: 96px; }
.star_5:hover { width: 120px; }

label { 
    display: block; _display:inline;
    height: 100%; width: 100%;
    cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {    
    background: url("${basepath}/resource/images/star.png") repeat-x 0 -20px;
    left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 24px; }
.score_2:checked ~ .star_2 { width: 48px; }
.score_3:checked ~ .star_3 { width: 72px; }
.score_4:checked ~ .star_4 { width: 96px; }
.score_5:checked ~ .star_5 { width: 120px; }

.star_bg:hover .star {  background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {    
    background: url("${basepath}/resource/images/star.png") repeat-x 0 -20px;
    left: 0; z-index: 1;
}

.recommend_sub{
	font-size:14px;
	font-weight:bold;
}
</style>
	<@menu.menu selectMenu=""/>

	<div class="container">
	
		<div class="row">
			<div class="col-xs-12">
			
				<#if e.rateOrderdetailList??>
                    <p class="text-success">您可以对下面的商品进行点评，点评后还可以获得一定的积分哦!</p>
                    <hr style="margin-top: 10px;">

                    <form action="${basepath}/order/doRate?orderid=${e.id!""}" id="form" method="post" onsubmit="return checkRate();">
						<#list e.rateOrderdetailList as item>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="media">

                                        <a class="pull-left" href="${basepath}/product/${item.productID!""}" target="_blank" title="${item.productName!""}">
                                            <img class="media-object err-product" style="width: 100px;height: 100px;border: 0px;" alt="" src="${systemSetting().imageRootPath}/${item.picture!""}" onerror="nofind()"/>
                                        </a>
                                        <div class="media-body">
                                            <h5 class="media-heading">对【${item.productName!""}】进行评价：</h5>
                                            <div id="starBg" class="star_bg">                    	
                                            	<input type="radio" id="starScore1" class="score score_1" value="1" name="score_${item.productID!""}">
                                            	<a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
                                            	<input type="radio" id="starScore2" class="score score_2" value="2" name="score_${item.productID!""}">
											    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
											    <input type="radio" id="starScore3" class="score score_3" value="3" name="score_${item.productID!""}">
											    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
											    <input type="radio" id="starScore4" class="score score_4" value="4" name="score_${item.productID!""}">
											    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
											    <input type="radio" id="starScore5" class="score score_5" value="5" name="score_${item.productID!""}">
											    <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
</div>
                                            <textarea class="form-control" name="product_${item.productID!""}" rows="4" cols="80" ></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
						</#list>

                        <div style="text-align: center;">
                            <input type="submit" id="rateBtn2" class="btn btn-primary" value="我来点评"/>
                        </div>
                    </form>
				<#else>
                    <p class="text-success">感谢您的评价!</p>
                    <hr style="margin-top: 10px;">


                    <div class="panel panel-default">
                        <div class="panel-body" style="font-size: 16px;font-weight: normal;text-align: center;">
                            <div class="panel-body" style="font-size: 16px;font-weight: normal;text-align: center;">
                                <div class="text-success" style="font-size: 16px;font-weight: 700;">
                                    <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;您好，您当前的订单已经被点评过了！
                                </div>
                            </div>
                        </div>
                    </div>
				</#if>
			</div>
		</div>

	<div>
		<#if productList?? && productList?size gt 0> 
		<div class="recommend_sub">购买过该商品的用户还购买了:</div>
		<div class="row IndexBottom">
		<#list productList as item>
		<div class="col-xs-3" style="padding: 5px; text-align: center;">
			<div class="thumbnail" style="width: 100%; display: block;">
				<div style="height: 200px; border: 0px solid; text-align: center;">
					<a href="${basepath}/product/${item.id!" "}.html" target="_blank">
						<img class="lazy" style="border: 0px; display: block; margin: auto; max-height: 100%; max-width: 100%;"
						border="0" src="${systemSetting().defaultProductImg!""}" 
						data-original="${systemSetting().imageRootPath}${item.picture!""}">
					</a>
				</div>
				<div style="height: 40px; text-align: center;">
					<div class="col-xs-12 left_product">
						<div class="row">
							<a style="cursor: pointer; margin: auto;white-space:normal;"
								href="${basepath}/product/${item.id!" "}.html" target="_blank"
								title="${item.name!""}"> ${item.name!""} </a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<b style="font-weight: bold; color: #cc0000;">
							￥${item.nowPrice!""} </b>
					</div>
					<div class="col-xs-6">
						<b style="text-decoration: line-through; font-weight: normal; font-size: 11px; color: #a5a5a5;">
							￥${item.price!""} </b>
					</div>
				</div>
			</div>
		</div>
		</#list>
		</#if>
	</div>
</div>
	
<script type="text/javascript">
	function checkRate() {
		var hasValue = false;
		$("textarea").each(function() {
			if ($.trim($(this).val()).length > 0) {
				hasValue = true;
			}
		});
		if (!hasValue) {
			alert("您还没有进行过任何点评！");
			$("textarea:eq(0)").focus();
			return false;
		}
		return true;
	}
</script>
</@html.htmlBase>